<template>
    <div>
        <object
            id="CertCtl"
            name="CertCtl"
            type="application/cert-reader"
            width="0"
            height="0"
            style="color:red;font-size:30px;text-align:center"
        >
            该浏览器不支持身份证阅读器控件！
            建议使用360浏览器
        </object>
        <el-form class="ena" ref="temp" :rules="rules" :model="temp">
            <el-form-item class="pic" style label="照片" prop="staff_img">
                <el-upload
                    v-model="temp.staff_img"
                    class="avatar-uploader"
                    action="http://192.168.1.106:8891/img/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img id="zpp" v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <!-- <img id="zpp" alt src class="avatar" /> -->
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item id="xmm" style="height:50px" label="姓名" prop="staff_name">
                <el-input v-model="temp.staff_name"></el-input>
            </el-form-item>
            <el-form-item style="height:50px" label="年龄" prop="staff_age">
                <el-input id="nll" v-model="temp.staff_age"></el-input>
            </el-form-item>
            <el-form-item style="height:50px" label="性别" prop="staff_sex">
                <el-input id="xbb" v-model="temp.staff_sex"></el-input>
            </el-form-item>
            <el-form-item style="height:50px" label="民族" prop="staff_nation">
                <el-input id="mzz" v-model="temp.staff_nation"></el-input>
            </el-form-item>
            <el-form-item style="height:50px" label="身份证地址" prop="staff_address">
                <el-input id="dzz" v-model="temp.staff_address"></el-input>
            </el-form-item>
            <el-form-item style="height:50px" label="身份证号" prop="staff_card">
                <el-input id="sfz" v-model="temp.staff_card"></el-input>
            </el-form-item>
            <el-form-item style="height:50px" label="手机号" prop="staff_phone">
                <el-input id v-model="temp.staff_phone"></el-input>
            </el-form-item>
            <el-form-item style="height:50px" label="紧急联系人" prop="sos_name">
                <el-input id v-model="temp.sos_name"></el-input>
            </el-form-item>
<div style="width:500px;height:40px;margin-left:8px;margin-bottom:15px;float:left">
                <span
                    style="height:40px;line-height:40px;font-size:14px;color:rgba(0,0,0,0.7);width:142px;display:block;float:left;text-align:right"
                >紧急联系人关系&nbsp;&nbsp;</span>
                <el-select v-model="temp.sos_ship" filterable placeholder="请选择" style="float:left">
                    <el-option
                        v-for="(item,index) in options0"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <el-form-item style="height:50px" label="紧急联系人电话" prop="sos_phone">
                <el-input id v-model="temp.sos_phone"></el-input>
            </el-form-item>
            
            <div class="second">
                <el-form-item label="站点">
                    <el-select
                        v-model="temp.station_id"
                        filterable
                        placeholder="请选择"
                        style="float:left"
                    >
                        <el-option
                            v-for="item in options1"
                            :key="item.id"
                            :label="item.station_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="分包单位">
                    <el-select
                        v-model="temp.sub_id"
                        filterable
                        placeholder="请选择"
                        style="float:left"
                        @change="getList($event)"
                    >
                        <el-option
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.subcontractors_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="工种">
                    <el-select
                        v-model="temp.worktype_id"
                        filterable
                        placeholder="请选择"
                        style="float:left"
                    >
                        <el-option
                            v-for="item in options3"
                            :key="item.id"
                            :label="item.worktype_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                <el-select v-model="temp.type" filterable placeholder="请选择" style="float:left">
                    <el-option
                        v-for="(item,index) in options6"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            </div>
        </el-form>
        <table
            class="butt"
            border="0"
            width="50%"
            cellpadding="0"
            cellspacing="0"
            style="padding-left: 100px;"
        >
            <tr>
                <td style="display:none">
                    <input style type="button" value="连接" @click="connect()" />
                </td>

                <td style="display:none">
                    <input type="button" value="状态" @click="getStatus()" />
                </td>

                <td>
                    <input type="button" value="读取" @click="readCert()" />
                </td>

                <td style="display:none">
                    <input type="button" value="断开" @click="disconnect()" />
                </td>
                <td>
                    <input type="button" value="提交" @click="addhandle('temp')" />
                </td>

                <td>&nbsp;</td>
            </tr>
        </table>

        <table style="width: 92%;display:none" align="center">
            <tr>
                <td class="style1" style="display:none">
                    <img id="handjpg" alt src style="height: 126px; width: 102px" />

                    <img id="PicFront" name="PicFront" alt src style="height: 209px; width: 327px" />

                    <img id="PicBack" name="PicBack" alt src style="height: 209px; width: 327px" />
                </td>
            </tr>
        </table>

        <table style="display:none" border="0" width="100%" cellpadding="0" cellspacing="10">
            <tr>
                <td align="right">读卡时间：</td>

                <td>
                    <input
                        type="text"
                        id="timeElapsed"
                        size="49"
                        style="width: 400px;"
                        readonly="readonly"
                    />
                </td>
            </tr>

            <tr>
                <td align="right">姓名：</td>

                <td>
                    <input
                        type="text"
                        id="partyName"
                        size="49"
                        style="width: 400px;"
                        readonly="readonly"
                    />
                    (要求中间，两头都没有空格)
                </td>
            </tr>

            <tr>
                <td align="right">性别：</td>

                <td>
                    <input
                        type="text"
                        id="gender"
                        size="49"
                        style="width: 400px;"
                        readonly="readonly"
                    />
                    (取值为“1”（表示“男”）或“0”（表示“女”）)
                </td>
            </tr>

            <tr>
                <td align="right">民族：</td>

                <td>
                    <input
                        type="text"
                        id="nation"
                        size="49"
                        style="width: 400px;"
                        readonly="readonly"
                    />
                    (汉字即可)
                </td>
            </tr>

            <tr>
                <td align="right">出生日期：</td>

                <td>
                    <input
                        type="text"
                        id="bornDay"
                        size="49"
                        style="width: 400px;"
                        readonly="readonly"
                    />
                    (要求格式为:yyyyMMdd，长度为8)
                </td>
            </tr>

            <tr>
                <td align="right">住址：</td>

                <td>
                    <input
                        type="text"
                        id="certAddress"
                        size="49"
                        style="width: 400px;"
                        readonly="readonly"
                    />
                </td>
            </tr>

            <tr>
                <td align="right">身份证号：</td>

                <td>
                    <input
                        type="text"
                        id="certNumber"
                        size="49"
                        style="color: #FF0000; width: 400px;"
                        readonly="readonly"
                    />
                    (居民身份号码，长度18位)
                </td>
            </tr>

            <tr>
                <td align="right">签发机关：</td>

                <td>
                    <input
                        type="text"
                        id="certOrg"
                        size="49"
                        style="width: 400px;"
                        readonly="readonly"
                    />
                </td>
            </tr>

            <tr>
                <td align="right">开始期限：</td>

                <td>
                    <input
                        type="text"
                        id="effDate"
                        size="49"
                        style="width: 400px;"
                        readonly="readonly"
                    />
                    (要求格式为:yyyyMMdd，长度为8)
                </td>
            </tr>

            <tr>
                <td align="right">结束期限：</td>

                <td>
                    <input
                        type="text"
                        id="expDate"
                        size="49"
                        style="width: 400px;"
                        readonly="readonly"
                    />
                    (要求格式为:yyyyMMdd，长度为8，或者是“长期”)
                </td>
            </tr>

            <tr>
                <td align="right">结果：</td>

                <td>
                    <textarea
                        id="result"
                        rows="8"
                        cols="47"
                        style="width: 400px;"
                        readonly="readonly"
                    ></textarea>
                </td>
            </tr>

            <tr>
                <td></td>

                <td></td>
            </tr>
        </table>
    </div>
</template>

<script type="text/javascript">
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';

export default {
    components: { Pagination },
    directives: { waves },

    methods: {
        getsection() {
            var me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            // console.log(me.temp.section_id,999)
        },

        getList($event) {
            console.log(this.temp.sub_id);
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('worktype/SelectWorktype', { sub_id: this.temp.sub_id, section_id: me.temp.section_id }, function(data) {
                me.options3 = data;
            });
        },
        getTableData2() {
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('station/SelectStation', { section_id: me.temp.section_id }, function(data) {
                me.options1 = data;
            });
        },
        getTableData3() {
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('subcontractors/SelectSubcontractors', { section_id: me.temp.section_id }, function(data) {
                me.options2 = data;
            });
        },

        addhandle(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let me = this;

                    ajax('/staff/InsertStaff', me.temp, function(data) {
                        me.$message({
                            title: '成功',
                            message: data.message,
                            type: 'success'
                        });
                    });
                    me.temp.staff_name = '';
                    me.temp.staff_img = '';
                    me.temp.staff_age = '';
                    me.temp.staff_address = '';
                    me.temp.staff_nation = '';
                    me.temp.staff_phone = '';
                    me.temp.staff_card = '';
                    me.temp.sos_name = '';
                    me.temp.sos_ship = '';
                    me.temp.sos_phone = '';
                    me.temp.staff_sex = '';
                    me.temp.section_id = '';
                    me.temp.sub_id = '';
                    this.imageUrl = '';
                }
            });
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            // this.$message(res);
            this.temp.staff_img = res;
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            // const isLt10M = file.size / 1024 / 1024 < 10;

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            // if (!isLt10M) {
            //     this.$message.error('上传头像图片大小不能超过 10MB!');
            // }
            // return isLt10M;
        },
        clearForm() {
            document.getElementById('timeElapsed').value = '';

            document.getElementById('partyName').value = '';
            document.getElementById('xbb').value = '';
            document.getElementById('xmm').value = '';
            document.getElementById('sfz').value = '';
            document.getElementById('dzz').value = '';
            document.getElementById('mzz').value = '';
            document.getElementById('nll').value = '';
            // document.getElementById('xbb').value = '';

            document.getElementById('gender').value = '';

            document.getElementById('nation').value = '';

            document.getElementById('bornDay').value = '';

            document.getElementById('certAddress').value = '';

            document.getElementById('certNumber').value = '';

            document.getElementById('certOrg').value = '';

            document.getElementById('effDate').value = '';

            document.getElementById('expDate').value = '';

            document.getElementById('handjpg').src = '';

            document.getElementById('result').value = '';

            PicFront.src = '';

            PicBack.src = '';
        },

        connect() {
            this.clearForm();

            var result = CertCtl.connect();

            document.getElementById('result').value = result;
            console.log('lianjie', 111);
        },

        disconnect() {
            this.clearForm();

            // var CertCtl = document.getElementById("CertCtl");

            var result = CertCtl.disconnect();

            document.getElementById('result').value = result;
            alert(1);
        },

        getStatus() {
            this.clearForm();

            // var CertCtl = document.getElementById("CertCtl");

            var result = CertCtl.getStatus();

            document.getElementById('result').value = result;
        },

        readCert() {
            this.clearForm();
            var startDt = new Date();
            var result = CertCtl.readCert();
            var endDt = new Date();

            document.getElementById('timeElapsed').value = endDt.getTime() - startDt.getTime() + '毫秒';

            document.getElementById('result').value = result;

            var resultObj = this.toJson(result);

            if (resultObj.resultFlag == 0) {
                // document.getElementById('partyName').value = resultObj.resultContent.partyName;
                document.getElementById('xmm').value = resultObj.resultContent.partyName;
                this.temp.staff_name = resultObj.resultContent.partyName;

                // document.getElementById('gender').value = resultObj.resultContent.gender;
                document.getElementById('xbb').value = resultObj.resultContent.gender;
                this.temp.staff_sex = resultObj.resultContent.gender;
                // document.getElementById('nation').value = resultObj.resultContent.nation;
                document.getElementById('mzz').value = resultObj.resultContent.nation;
                this.temp.staff_nation = resultObj.resultContent.nation;
                document.getElementById('bornDay').value = resultObj.resultContent.bornDay;

                document.getElementById('nll').value = 2020 - parseInt(resultObj.resultContent.bornDay / 10000);
                this.temp.staff_age = 2020 - parseInt(resultObj.resultContent.bornDay / 10000);
                // document.getElementById('certAddress').value = resultObj.resultContent.certAddress;
                document.getElementById('dzz').value = resultObj.resultContent.certAddress;
                this.temp.staff_address = resultObj.resultContent.certAddress;
                // document.getElementById('certNumber').value = resultObj.resultContent.certNumber;
                document.getElementById('sfz').value = resultObj.resultContent.certNumber;
                this.temp.staff_card = resultObj.resultContent.certNumber;

                document.getElementById('certOrg').value = resultObj.resultContent.certOrg;

                document.getElementById('effDate').value = resultObj.resultContent.effDate;

                document.getElementById('expDate').value = resultObj.resultContent.expDate;

                document.getElementById('handjpg').src = 'data:image/png;base64,' + resultObj.resultContent.identityPic;
                // document.getElementById('zpp').value = 'data:image/png;base64,' + resultObj.resultContent.identityPic;
                // document.getElementById('zpp').src = 'data:image/png;base64,' + resultObj.resultContent.identityPic;
                this.imageUrl = 'data:image/png;base64,' + resultObj.resultContent.identityPic;
                console.log(this.imageUrl, 7777);
                this.temp.staff_img = 'data:image/png;base64,' + resultObj.resultContent.identityPic;
                // PicFront.src = 'data:image/jpeg;base64,' + resultObj.resultContent.base64ID_PicFront;

                // PicBack.src = 'data:image/jpeg;base64,' + resultObj.resultContent.base64ID_PicBack;
            }
            var me = this;
            var parameter = {
                imgStr: me.temp.staff_img
            };
            $.ajax({
                type: 'POST',
                url: 'http://192.168.1.106:8891/img/base64_img',
                contentType: 'application/json',
                data: JSON.stringify(parameter),
                success: function(data) {
                    // console.log('成功111')

                    // console.log(data,99999999)
                    me.temp.staff_img = data;
                }
            });
        },
        toJson(str) {
            //var obj = JSON.parse(str);

            //return obj;

            return eval('(' + str + ')');
        }
    },
    watch: {
        data() {
            this.handelData();
        }
    },

    data() {
        return {
            options1: [],
            options2: [],
            options3: [],
            name111: '',
            options0: [
                {
                    value: '父母',
                    label: '父母'
                },
                {
                    value: '兄弟姐妹',
                    label: '兄弟姐妹'
                },
                {
                    value: '配偶',
                    label: '配偶'
                },
                {
                    value: '朋友',
                    label: '朋友'
                },
                
            ],
           
            options6: [
                {
                    value: '管理人员',
                    label: '管理人员'
                },
                {
                    value: '劳务人员',
                    label: '劳务人员'
                },
                {
                    value: '劳务管理人员',
                    label: '劳务管理人员'
                },
                {
                    value: '特种作业人员',
                    label: '特种作业人员'
                }
            ],
            imageUrl: '',
            name1: '',
            rules: {
                staff_img: [{ required: true, message: '照片不能为空！', trigger: 'blur' }],
                staff_nation: [{ required: true, message: '民族不能为空！', trigger: 'blur' }],
                staff_sex: [{ required: true, message: '性别不能为空！', trigger: 'blur' }],
                staff_card: [{ required: true, message: '身份证号不能为空！', trigger: 'blur' }],
                staff_address: [{ required: true, message: '地址不能为空！', trigger: 'blur' }],
                departmentname: [{ required: true, message: '部门不能为空！', trigger: 'blur' }],
                staff_phone: [{ required: true, message: '手机号不能为空！', trigger: 'blur' }],
                sos_name: [{ required: true, message: '紧急联系人不能为空！', trigger: 'blur' }],
                sos_ship: [{ required: true, message: '紧急联系人关系不能为空！', trigger: 'blur' }],
                sos_phone: [{ required: true, message: '紧急联系人电话不能为空！', trigger: 'blur' }],
                worktypename: [{ required: true, message: '工种不能为空！', trigger: 'blur' }],
                entry_time: [{ required: true, message: '入职时间不能为空！', trigger: 'blur' }],
                staff_name: [{ required: true, message: '姓名不能为空！', trigger: 'blur' }],
                staff_address: [{ required: true, message: '详细地址不能为空！', trigger: 'blur' }],
                id: [{ required: true, message: 'id不能为空！', trigger: 'blur' }],
                staff_age: [{ required: true, message: '年龄不能为空！', trigger: 'blur' }]
            },
            temp: {
                station_name: '',
                staff_img: '',
                staff_nation: '',
                staff_card: '',
                staff_address: '',
                departmentname: '',
                staff_phone: '',
                sos_name: '',
                sos_ship: '',
                sos_phone: '',
                worktypename: '',
                entry_time: '',
                staff_name: '',
                staff_sex: '',
                department_id: '',
                worktype_id: '',
                id: '',
                staff_age: '',
                station_id: ''
            }
        };
    },
    mounted() {
        var me = this;
        // me.clearForm();
        me.connect();
        me.getTableData2();
        me.getTableData3();
        me.getsection();
    }
};
</script>
<style>
.second {
    margin-top: 50px;
    float: left;
    width: 1605px;
    height: 193px;
    /* background: rgba(246, 246, 246, 0.5); */
}
.butt {
    width: 1100px;
    height: 50px;
    /* background: rgb(138, 138, 172); */
}
.butt input {
    float: right;
    width: 102px;
    height: 36px;
    background: rgba(31, 168, 220, 1);
    border-radius: 3px;
}
.style1 {
    height: 81px;

    width: 622px;
}
.ena .el-input {
    width: 275px;
    height: 28px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 3px 0px rgba(88, 88, 88, 0.16);
}
.ena .el-form-item__label {
    width: 150px;
}
.ena {
    width: 1605px;
    height: 451px;
    /* background:rgba(246,246,246,0.5); */
}
.ena .el-form-item {
    width: 500px;
    height: 50px;
    float: left;
}
.ena .el-form-item:nth-child(1) {
    width: 500px;
    height: 340px;
    float: left;
    /* border: none; */
    /* background:rgba(246,246,246,0.5); */
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
.avatar {
    width: 160px;
    height: 200px;
    display: block;
}
/* .pic >>> .el-upload--text {
    width: 180px;
    height: 180px;
} */
.el-upload--text {
    width: 160px;
    height: 200px;
}
.pic {
    width: 278px;
    height: 310px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 3px 0px rgba(88, 88, 88, 0.16);
}
.second .el-input__suffix {
    top: 5px;
}

</style>